<template>
	<view class='box'>
		<swiper class="swiper" >
			<swiper-item v-if="video">
				<video class="swiperimg" :src="video" autoplay="true" enable-progress-gesture="false"></video>
			</swiper-item>
		</swiper>

		<view class="biaotiBox">
			<!-- <text class="biaotiTitle">包邮</text> -->
			{{item.title}}
			<!-- 榴力量d197猫山王榴莲正宗马来西亚进口液氮冷冻新鲜水果 -->
		</view>

		<view class="shopDetails">
			<!-- <view class="shopTitle" text="商品详情">文章详情</view> -->
			<view class="center_horizontal" style="width:750rpx;">
				<view class="informationBox2">
					<view>
						<view style="margin-bottom:15rpx;">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgapi: "",
				item: {},
				video: '',

				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 2000,
			}
		},
		
		onLoad(e) {
			this.getItem(e.id)
		},
		
		methods: {
			clickImg(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			getItem(id) {
				this.$nextTick(function() {
					const that = this;

					this.imgapi = this.$reqConfig.URLIMAGE
					this.$axios({
						url: "user/public/newsDetails",
						method: "post",
						data: {
							id
						}
					}).then((res) => {
						this.item = res.result
						this.item.avatar = this.imgapi + this.item.avatar
						if (this.item.video) {
							this.video = this.$reqConfig.URLIMAGE + this.item.video
						}
						this.item.content = this.item.content.replace(/\<img src="/gi,
							'<img src=' + '\"' + this.$reqConfig.URLIMAGE)
					})
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.swiper {
		width: 750rpx;
		margin-bottom: 10rpx;
		height: 350rpx;
	}

	.swiperimg {
		width: 750rpx;
		height: 100%;
	}

	.biaotiBox {
		text-align: left;
		background-color: #fff;
		font-weight: bold;
		padding: 20rpx;
		margin-top: 15rpx;
	}

	.shopDetails .title {
		text-align: center;
		position: relative;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.shopDetails .title::before {
		display: inline-block;
		content: "";
		width: 150rpx;
		height: 10rpx;
		position: absolute;
		bottom: 0;
		background: rgba(134, 204, 20, .5);
	}

	.shopDetails {
		padding-top: 15rpx;
		margin-top: 15rpx;
		width: 750rpx;
		height: 100%;
		background-color: #fff;
	}

	.shopDetailsimg {
		width: 750rpx;
		height: 100%;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		background-color: #fff;
		margin-bottom: 150rpx;
	}
</style>
